import React from "react";
import styles from "./Index.module.css";
import { Avatar, Button, NavBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { List } from "antd-mobile";
function Index() {
  const nav = useNavigate();
  const user = localStorage.getItem("nickName");

  const tui=()=>{
    localStorage.removeItem('headPic')
    localStorage.removeItem('nickName')
    localStorage.removeItem('sessionId')
    localStorage.removeItem('userId')
    nav('/login')
  }

  return (
    <div className={styles.set}>
      <div className={styles.nav}>
        <NavBar onBack={() => nav(-1)} style={{ marginTop: "10px" }}>
          设置
        </NavBar>
      </div>

      <div className={styles.list}>
        <List>
          <List.Item onClick={()=>nav('/myxinx')}>
            <div className={styles.list1}>
              <div style={{ marginTop: "10px" }}>
                <Avatar
                  src=""
                  style={{ "--border-radius": "50%", marginTop: "-7px" }}
                />
              </div>
              <div style={{ marginTop: "10px" }}>{user}</div>
            </div>
          </List.Item>

          <List.Item onClick={() => {}}>修改密码</List.Item>

          <List.Item onClick={() => {}}>清除缓存</List.Item>
          <List.Item onClick={() => {}}>屏幕亮度</List.Item>
          <List.Item onClick={() => {}}>版本检测</List.Item>
          <List.Item onClick={() => {}}>帮助中心</List.Item>
          <List.Item onClick={() => {}}>关于我们</List.Item>
          <List.Item onClick={() => {}}>邀请好友</List.Item>
        </List>
      </div>

      <div className={styles.footer}>
        <Button
          color="primary"
          fill="none"
          style={{ color: "red", marginLeft: "140px" }}
          onClick={tui}
        >
          退出登录
        </Button>
      </div>
    </div>
  );
}

export default Index;
